<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>1.v-for 遍历数组</h1>
        <ul>
            <li v-for="(value,index) in dataList">{{ index + 1 }}.{{ value }}</li>
        </ul>
        <ul>
            <li v-for="value in dataList">{{ value }}</li>
        </ul>

        <!-- 渲染数组，里面包含对象 -->
        <ul>
            <li v-for="value in salary">
                {{ value.id }}.{{ value.name }}工资是{{ value.salary }}，他说过“{{ value.title }}”。
            </li>
        </ul>

        <!-- 课堂作业： -->
        <ul>
            <li>
                <p>商品编号：101，名字：oppo</p>
                <p>价格：4999</p>
                <p>颜色：</p>
                <ul>
                    <li>红色</li>
                    <li>绿色</li>
                    <li>玫瑰金</li>
                </ul>
            </li>
        </ul>

        <h1>1.v-for 遍历对象</h1>
        <ul>
            <li v-for="(value, key, index) in obj">{{ index }}.{{ key }}:{{ value }}</li>
        </ul>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el : '#app',
        data : {
            dataList : ['华为','oppo','菠萝','锤子'],
            salary : [{
                id : 1,
                name : '马云',
                salary : '2000',
                title : '我对钱不感兴趣'
            },{
                id : 2,
                name : '王健林',
                salary : '3000',
                title : '我们先定一个小目标，一个亿'
            },{
                id : 3,
                name : '刘强东',
                salary : '4000',
                title : '不知妻美'
            }],
            // 作业的数据
            goodsList : [{
                gid : 101,
                title : '华为',
                price : 5999,
                color : ['红色','绿色','玫瑰金']
            },{
                gid : 102,
                title : 'oppo',
                price : 4999,
                color : ['绿色','粉红色','玫瑰金','黄色']
            }],
            obj : {
                name : '马化腾',
                title : '喜欢乒乓球',
                age : 45
            }
        }
    })
</script>
</html>